<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /*
           dom 
 
               查询 
                   document.querySelector all -》$()
               属性 
                   标准属性
                       dom.属性名 
                       dom.属性名 = 属性值
                       dom.checked 
                       dom.checked =true
 
 
                       -》jq 
                           $('#ck1').prop('属性名')
                           $('#ck1').prop('属性名','属性值')
                   自定义属性
                       dom.setAttribute()
                       dom.getAttribute()
                       dom.rmoveAttribute()
                       dom.dataset.xx -> data-xx
 
                       ->jq
                           $().attr(key)
                           $().attr(key,value)
 
 
               内容
                   ipt.value
                   div.innerHTML
                   div.innerText
                   ->jq
                   $().val()
                   $().val('aa')
                   $().html()
                   $().html('aa')
 
                   $().text()
                   $().text('bb')
 
 
 
               样式
                   获取样式
                       getComputedStyle 最终样式
                   设置样式
                       dom.style.xx = 'xx'   行内样式
 
                    -》jq
                         获取样式
                       $().css(key)   
                        设置样式
                       $().css(key,value)   
 
                       $().css({key:value,key1:value2})   
 
 
               class
                    dom.className 
                    dom.className = 'a'
                    dom.classList.add()
                    dom.classList.remove()
                    dom.classList.replace()
                    dom.classList.toggle()
                    dom.classList.contains()
 
               dom节点关系   ->       筛选器  父子 兄弟 
 
               dom 创建-添加-删除-替换
       
       */
    </script>
    <script src=" https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <div id="box">

    </div>
    <script>
        // 添加类
        $('#box').addClass('item')
        $('#box').addClass('itema')
        // 删除类
        $('#box').removeClass('itema')
        // 切换类--有就删除-没有就添加
        $('#box').toggleClass('itema')

        // 判断是否有某个类名
        console.log($('#box').hasClass('item'));
        console.log($('#box').hasClass('a'));

    </script>

</body>

</html>